<template>
  <el-dialog
    v-model="visible"
    title="监测数据查看"
    width="70%"
    :close-on-click-modal="false"
    :draggable="false"
    custom-class="monitoring-dialog"
  >
    <el-table :data="records" border style="width: 100%">
      <el-table-column prop="data_id" label="编号" width="100" />
      <el-table-column prop="timestamp" label="时间" width="180" />
      <el-table-column prop="x" label="X坐标" />
      <el-table-column prop="y" label="Y坐标" />
      <el-table-column prop="z" label="Z坐标" />
      <el-table-column prop="delta_x" label="ΔX" />
      <el-table-column prop="delta_y" label="ΔY" />
      <el-table-column prop="delta_z" label="ΔZ" />
      <el-table-column prop="vector" label="位移量" />
      <el-table-column prop="velocity" label="速度" />
      <el-table-column prop="acceleration" label="加速度" />
      <el-table-column prop="quality_flag" label="质量标识" width="100" />
    </el-table>

    <template #footer>
      <el-button @click="visible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from "vue";
import axios from "axios";

const visible = ref(false);
const records = ref([]);

// 暴露 open 方法，供外部调用
const open = async (pointId) => {
  visible.value = true;
  try {
    const response = await axios.get(`/monitoring-data/${pointId}/`);
    records.value = response.data;
  } catch (error) {
    console.error("获取监测点数据时出错:", error);
    records.value = [];
  }
};

defineExpose({ open });
</script>

<style scoped>
.monitoring-dialog {
  height: 75%;
  display: flex;
  flex-direction: column;
}
.monitoring-dialog .el-dialog__body {
  flex: 1;
  overflow-y: auto;
}
</style>
